<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3+ts+vite Template</title>
    <style>
        .preloader {
            position: fixed;
            background: #fff;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 999;
            overflow: hidden;
        }

        .main-loader {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .loader1 {
            width: 20px;
            height: 20px;
            background-color: #3C537D;
            border-radius: 50%;
            float: left;
            z-index: 9;
            position: absolute;
            left: 20px;
            top: 20px;
            animation-name: pulse;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            transform-origin: center;
            animation-delay: 0s;
            transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .loader2 {
            width: 40px;
            height: 40px;
            background-color: #3C537D;
            border-radius: 50%;
            float: left;
            z-index: 8;
            opacity: 0.7;
            position: absolute;
            left: 10px;
            top: 10px;
            animation-name: pulse2;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-delay: 0.3s;
            transform-origin: center;
            transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .loader3 {
            width: 60px;
            height: 60px;
            background-color: #3C537D;
            border-radius: 50%;
            float: left;
            z-index: 7;
            opacity: 0.4;
            position: absolute;
            left: 0;
            top: 0;
            animation-name: pulse3;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-delay: 0.5s;
            transform-origin: center;
            transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        @keyframes pulse {
            from {
                transform: scale3d(1, 1, 1);
            }

            50% {
                transform: scale3d(0.2, 0.2, 0.2);
            }
        }

        @keyframes pulse2 {
            from {
                transform: scale3d(1, 1, 1);
            }

            50% {
                transform: scale3d(0, 0, 0);
            }

            100% {
                transform: scale3d(1, 1, 1);
            }
        }

        @keyframes pulse3 {
            from {
                transform: scale3d(1, 1, 1);
            }

            50% {
                transform: scale3d(0, 0, 0);
            }

            90% {
                transform: scale3d(1, 1, 1);
            }
        }
    </style>
</head>

<body>


<div id="app">
    <div class="preloader">
        <div class="main-loader">
            <span class="loader1"></span>
            <span class="loader2"></span>
            <span class="loader3"></span>
        </div>
    </div>
</div>


<script type="module" src="/src/main.ts"></script>
</body>

</html>
